<!DOCTYPE html>
<html>
    <head>
        <meta charset='UTF-8' />
        <style>
            div.c1{
                width:10px;height:10px;
                border:5px solid red;
                border-radius:50%;
                margin:100px auto;
                position:relative;
                box-shadow:
                   0px 0px 0px 5px maroon,
                   0px 0px 0px 10px purple,
                   0px 0px 0px 15px lime,
                   0px 0px 0px 20px fuchsia,
                   0px 0px 0px 25px olive,
                   0px 0px 0px 30px yellow,
                   0px 0px 0px 35px aqua,
                   0px 0px 0px 40px crimson,
                   0px 0px 0px 45px chartreuse,
                   0px 0px 0px 50px brown;
                   
                   
                  /* maroon purple lime fuchsia olive yellow aqua crimson chartreuse brown */
            }
            
            div.c1::after{
                 content:'';
                 display:block;
                 width:10px;height:180px;
                 border:1px solid pink;
                 background-color:pink;
                 transform:rotate(30deg);
                 position:absolute;
                 left:-40px;top:-17px;
                 z-index:-999;
            }
        </style>
    </head>
    <body>
        <div class='c1'></div>
    </body>
</html>
